<template>
  <div class="q-pa-md q-gutter-sm">
    <t-bar dense class="bg-teal text-white">
      <t-icon name="arrow_forward" />
      <div>mobi-net</div>
      <div>4G</div>
      <t-icon name="arrow_forward" />
      <t-space />
      <t-icon name="near_me" />
      <div>100%</div>
      <t-icon name="arrow_forward" />
    </t-bar>

    <t-bar dense class="bg-amber text-grey-8">
      <t-icon name="arrow_forward" />
      <div>mobi-net</div>
      <div>4G</div>
      <t-icon name="arrow_forward" />
      <t-space />
      <t-icon name="near_me" />
      <div>100%</div>
      <t-icon name="arrow_forward" />
    </t-bar>
  </div>
</template>

<script>
  export default {
    setup() {
      return {};
    },
  };
</script>
